<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天气</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div class="header">
    <div class="header-inner">
        <div class="header-nav">
            <h1>天气网</h1>
            <div class="header-id">
                <span>当前位置：<span id="city"></span></span>
                <input type="text" id="ipt" placeholder="查询天气">
            </div>
        </div>
    </div>
</div>
<div class="main">
    <div class="main-inner">
        <div class="main-today">
            <div class="tim-1">
                <p class="tmp"><span id="tmp"></span><span>°</span></p>
                <p class="cond"><span id="cond"></span></p>
            </div>
            <div class="tim-2">
                <p><span id="wind"></span><span id="sc"></span><i>级</i></p>
                <p><span>湿度</span><span id="hum"></span><i>%</i></p>
            </div>
            <div class="tim-3">
                <p id="trav"></p>
            </div>
        </div>
        <div class="fd">
        <div class="main-zt">
            <h2 class="h2">逐小时预报</h2>
            <ul class="list">
                <li>
                    <p class="date"></p>
                    <p class="now"></p>
                    <p><span class="tmp_1"></span><span>°</span></p>
                </li>
                <li>
                    <p class="date"></p>
                    <p class="now"></p>
                    <p><span class="tmp_1"></span><span>°</span></p>
                </li>
                <li>
                    <p class="date"></p>
                    <p class="now"></p>
                    <p><span class="tmp_1"></span><span>°</span></p>
                </li>
                <li>
                    <p class="date"></p>
                    <p class="now"></p>
                    <p><span class="tmp_1"></span><span>°</span></p>
                </li>
                <li>
                    <p class="date"></p>
                    <p class="now"></p>
                    <p><span class="tmp_1"></span><span>°</span></p>
                </li>
                <li>
                    <p class="date"></p>
                    <p class="now"></p>
                    <p><span class="tmp_1"></span><span>°</span></p>
                </li>
                <li>
                    <p class="date"></p>
                    <p class="now"></p>
                    <p><span class="tmp_1"></span><span>°</span></p>
                </li>
                <li>
                    <p class="date"></p>
                    <p class="now"></p>
                    <p><span class="tmp_1"></span><span>°</span></p>
                </li>
            </ul>
        </div>
        <div class="main-zt" id="main-1">
            <h2 class="h2">7日天气预报</h2>
            <ul class="list_1">
                <li>
                    <p></p>
                    <p><span class="date_1"></span></p>
                    <p><span class="now_1"></span></p>
                    <p class="wd"><span class="tmp_max"></span>/<span class="tmp_min"></span></p>
                    <p><span class="dir"></span><span class="sc"></span></p>
                </li>
                <li>
                    <p></p>
                    <p><span class="date_1"></span></p>
                    <p><span class="now_1"></span></p>
                    <p class="wd"><span class="tmp_max"></span>/<span class="tmp_min"></span></p>
                    <p><span class="dir"></span><span class="sc"></span></p>
                </li>
                <li>
                    <p></p>
                    <p><span class="date_1"></span></p>
                    <p><span class="now_1"></span></p>
                    <p class="wd"><span class="tmp_max"></span>/<span class="tmp_min"></span></p>
                    <p><span class="dir"></span><span class="sc"></span></p>
                </li>
                <li>
                    <p></p>
                    <p><span class="date_1"></span></p>
                    <p><span class="now_1"></span></p>
                    <p class="wd"><span class="tmp_max"></span>/<span class="tmp_min"></span></p>
                    <p><span class="dir"></span><span class="sc"></span></p>
                </li>
                <li>
                    <p></p>
                    <p><span class="date_1"></span></p>
                    <p><span class="now_1"></span></p>
                    <p class="wd"><span class="tmp_max"></span>/<span class="tmp_min"></span></p>
                    <p><span class="dir"></span><span class="sc"></span></p>
                </li>
                <li>
                    <p></p>
                    <p><span class="date_1"></span></p>
                    <p><span class="now_1"></span></p>
                    <p class="wd"><span class="tmp_max"></span>/<span class="tmp_min"></span></p>
                    <p><span class="dir"></span><span class="sc"></span></p>
                </li>
                <li>
                    <p></p>
                    <p><span class="date_1"></span></p>
                    <p><span class="now_1"></span></p>
                    <p class="wd"><span class="tmp_max"></span>/<span class="tmp_min"></span></p>
                    <p><span class="dir"></span><span class="sc"></span></p>
                </li>
            </ul>
        </div>
        </div>
        <div class="fd-1">
            <h2 class="h2" style="margin-top: 6px">生活指数</h2>
            <ul class="list_2">
                <li class="itme">
                    <div class="div_1">
                        <i class="icon icon_hot"></i>
                        <p>穿衣 <span id="drsg_brf"></span></p>
                    </div>
                    <div class="div_2">
                        <p><span id="drsg_txt"></span></p>
                    </div>
                </li>
                <li class="itme">
                    <div class="div_1">
                        <i class="icon icon_yusan"></i>
                        <p>防晒 <span id="uv_brf"></span></p>
                    </div>
                    <div class="div_2">
                        <p><span id="uv_txt"></span></p>
                    </div>
                </li>
                <li class="itme">
                    <div class="div_1">
                        <i class="icon icon_yundong"></i>
                        <p>运动 <span id="sport_brf"></span></p>
                    </div>
                    <div class="div_2">
                        <p><span id="sport_txt"></span></p>
                    </div>
                </li>
                <li class="itme">
                    <div class="div_1">
                        <i class="icon icon_xiche"></i>
                        <p>洗车 <span id="cw_brf"></span></p>
                    </div>
                    <div class="div_2">
                        <p><span id="cw_txt"></span></p>
                    </div>
                </li>
                <li class="itme">
                    <div class="div_1">
                        <i class="icon icon_lvyou"></i>
                        <p>旅游 <span id="trav_brf"></span></p>
                    </div>
                    <div class="div_2">
                        <p><span id="trav_txt"></span></p>
                    </div>
                </li>
                <li class="itme">
                    <div class="div_1">
                        <i class="icon icon_shushidu"></i>
                        <p>舒适度 <span id="comf_brf"></span></p>
                    </div>
                    <div class="div_2">
                        <p>
                            <span id="comf_txt"></span>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="footer">
    <div class="footer-inner">
        <p>服务协议 | 隐私政策 | 开放平台 | 广告服务 | 客服中心 | 举报中心 | 网站导航</p>
    </div>
</div>
<!--<div>城市：<span id="city"></span></div>
<div>天气：<span id="now"></span></div>-->

<script src="js/script.js"></script>
</body>
</html>